<template>
  <div class="content_">
    <header class="page-header">
      业务管理
    </header>
    <div class="btn-group">
      <el-button type="primary" @click="newContent">新增业务</el-button>
    </div>
    <el-table :data="content_list" border style="width: 100%">
      <el-table-column prop="level" label="序号"> </el-table-column>
      <el-table-column prop="name" label="业务名"> </el-table-column>
      <el-table-column prop="remark" label="描述"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="modifyContent(scope.row.id)">修改产品</el-button>
          <el-button type="text" size="small" @click="setDele(scope.row.id, scope.row.isdel)">删除业务</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
      :title="this.contentParams.id ? '修改业务' : '新增业务'"
      :visible.sync="newVisible"
      :append-to-body="true"
      :before-close="handleClose">
      <el-upload
        action="https://www.qiniu.com/"
        list-type="picture-card"
        :file-list="this.contentParams.img"
        :on-remove="handleRemove"
        :auto-upload="false"
        :multiple="true"
        :on-change="fileChange">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-form :inline="true" class="content-edit">
        <el-form-item label="名称">
          <el-input v-model="contentParams.name" placeholder="输入名称"></el-input>
        </el-form-item>
        <el-form-item label="等级">
          <el-input v-model="contentParams.level" placeholder="输入参考价"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="contentParams.remark" placeholder="输入产品描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: 'contents',
  data() {
    return {
      newVisible: false,
      sfile: [],
      contentParams:{
        id: '',
        name: '',
        remark: '',
        level: '',
        img: []
      }
    }
  },
  computed: {
    ...mapGetters({
      content_list: "content/content_list",
    })
  },
  created() {
    this.$store.commit('content/SET_VM', {vm: this})
    this.$store.dispatch('content/get_content')
  },
  methods:{
    handleClose() {
      this.newVisible = false
    },
    handleRemove(file) {
      this.contentParams.img = this.contentParams.img.filter(img => img.url !== file.url)
    },
    newContent(){
      this.contentParams = {
        id: '',
        name: '',
        remark: '',
        level: '',
        img: []
      }
      this.newVisible = true
    },
    modifyContent(id) {
      this.contentParams = {
        id: id,
        name: '',
        img: [],
        remark: '',
        level: ''
      },
      this.newVisible = true
      this.$store.dispatch('content/content_detail')
    },
    confirmUpload() {
      var form = new FormData();
      this.sfile = this.sfile.filter(file => file)
      this.sfile.forEach(function (file, index) {
        form.append('file' + index, file)
      })
      for (var i in this.contentParams) {
        form.append(i, this.contentParams[i])
      }
      if(!this.contentParams.id) {
        this.$store.dispatch('content/upload', {form: form})
      }else{
        this.$store.dispatch('content/modify_content', {form: form})
      }

    },
    fileChange(file, fileList){
      fileList = fileList || []
      this.sfile = fileList.map(function (file) {
        return file.raw
      })
    },
    setDele(id, isdel) {
      isdel = Math.abs(isdel - 1)
      this.$store.dispatch('content/set_dele', {id: id, isdel: isdel})
    }
  }

}
</script>

<style lang='scss'>
  .btn-group{
    margin: 20px auto;
    text-align: center;
  }
  .content-edit{
    label{
      width: 100px!important;
    }
    input.el-input__inner{
      width: 200px!important;
    }
  }
</style>
